import CreateMenuTransfer from '../components/CreateMenuTransfer'
import React, { useState, useRef, useEffect } from 'react'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table'
import { Form, Input, Divider, message, Button, Modal, Row, Col } from 'antd'
import { connect, history } from 'umi'
import {addRoleInterface, getRolePageList, deleteUserRole, updateRoleMenu, updateRoleFunc} from '../service'

const { TextArea } = Input;

const TableList = (props) => {
  const actionRef = useRef();
  const [tableData, setTableData] = useState([]);
  const [done, setDone] = useState(false);
  const [visible, setVisible] = useState(null);
  const [addRoleVisible, setAddRoleVisible] = useState(null);
  const [current, setCurrent] = useState(undefined);
  const [type, setType] = useState('');
  const [selectionType, setSelectionType] = useState('radio');
  const [selectedRoleIds, setSelectedRoleIds] = useState([]);
  const [form] = Form.useForm();
  const [formInitValues, setFormInitValues] = useState({});

  const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      setSelectedRoleIds(selectedRowKeys);
    }
  };

  const showMenu = (roleInfo,type) => {
    setVisible(true);
    setType(type);
    setCurrent(roleInfo);
  };

  const handleCancel = () => {
    setCurrent(null);
    setVisible(false);
  };

  const addRole = () => {
    setAddRoleVisible(true);

  };

  const addRoleOk = values => {
    setAddRoleVisible(false);
    form.resetFields();
    addRoleInterface(values).then(r =>{
      if (r.flag){
        message.success(`新增角色成功。`);
      }else {
        message.error(`新增角色失败。`);
      }
      actionRef.current.reload();
    })
  };

  const addRoleCancel = e => {
    setAddRoleVisible(false);
    form.resetFields();
  };

  const delRole = (value) => {
    deleteUserRole(value.roleId).then(r => {
      if (r.flag){
        message.success(`删除角色成功。`);
      }else {
        message.error(`删除角色失败。`);
      }
      actionRef.current.reload();
    })
  };

  const handleSubmit = (values,type) => {
    setDone(true);
    setCurrent(null);
    setVisible(false);
    if (type==='2'){
      updateRoleFunc(values).then(r => {
        if (r.flag){
          message.success(`操作成功。`);
        }else {
          message.error(`操作失败。`);
        }
      })
    }else {
      updateRoleMenu(values).then(r => {
        if (r.flag){
          message.success(`操作成功。`);
        }else {
          message.error(`操作失败。`);
        }
      })
    }

  };

  const columns = [
    {
      title: '序号',
      render:(text,record,index)=>`${index+1}`,
      hideInSearch: true,
      dataIndex: 'roleId',
      align: 'center',
    },
    {
      title: '角色名称',
      dataIndex: 'roleName',
      align: 'center',
    },
    {
      title: '角色中文名称',
      dataIndex: 'name',
      align: 'center',
    },
    {
      title: '备注',
      hideInSearch: true,
      dataIndex: 'remark',
      align: 'center',
    },

    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      align: 'center',
      width: '20%',
      render: (item, record) => (
        <>
          {<a onClick={() => showMenu(record,'1')}>分配菜单</a>}
          {<Divider type="vertical" />}
          {<a onClick={() => showMenu(record,'2')}>分配功能</a>}
          {<Divider type="vertical" />}
          {<a onClick={() => delRole(record)}>删除</a>}
        </>
      ),
    },
  ];


  return (
    <PageHeaderWrapper>
      <ProTable
        actionRef={actionRef}
        rowKey="roleId"
        dataSource={tableData}
        options={false}
        request={(params) => getRolePageList(params)}
        toolBarRender={(action, { selectedRows }) => [
          <Button type="primary" onClick={() => addRole()}>新建</Button>
        ]}
        columns={columns}
      />
      <CreateMenuTransfer
        done={done}
        current={current}
        visible={visible}
        onCancel={handleCancel}
        onSubmit={handleSubmit}
        type={type}
      >
      </CreateMenuTransfer>

      <Modal
        maskClosable={false}
        title="添加角色"
        visible={addRoleVisible}
        footer={null}
        closable={false}
      >
        <Form
          form={form}
          name="normal_login"
          className="login-form"
          initialValues={formInitValues}
          onFinish={addRoleOk}
        >
          <Form.Item name="roleName">
            <Input placeholder="英文角色名" />
          </Form.Item>
          <Form.Item name="name">
            <Input placeholder="中文角色名"/>
          </Form.Item>
          <Form.Item name="remark">
            <TextArea rows={4} placeholder="备注"/>
          </Form.Item>
          <Row justify='end' gutter={16}>
            <Col className="gutter-row" style={{paddingBottom: '20px'}}>
              <Button type="primary" onClick={addRoleCancel}>取消</Button>,
              <Button type="primary" htmlType="submit">保存</Button>
            </Col>
          </Row>

        </Form>
      </Modal>

    </PageHeaderWrapper>
  )
};

export default connect(({  }) => ({
}))(TableList)
